import React, { useEffect, useState } from 'react'
import SearchListView from '../SearchListView'
import api from '../../../api'
import LoadMore from '../../../components/LoadMore'
import './style.less'

const SearchList = (props) => {
  const [searchData, setSearchData] = useState([])
  const [hasMore, setHasMore] = useState(false)

  useEffect(() => {
    http()
    return () => {
      setSearchData([])
      setHasMore(false)
    }
  }, [props.search])

  function loadMoreHandle() {
    http()
  }

  function http() {
    api
      .search({
        search: props.search,
      })
      .then((res) => {
        // console.log(res)
        if (res.data.status === 200) {
          // 数据合并
          setSearchData([...searchData, ...res.data.result.data])
          setHasMore(res.data.result.hasMore)
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }

  return (
    <div>
      {searchData.length > 0 ? <SearchListView search={searchData} /> : <div className="load">等待数据加载...</div>}
      {hasMore ? <LoadMore onLoadMore={loadMoreHandle} /> : <div className="none">没有数据了</div>}
    </div>
  )
}

export default SearchList
